
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jq/jquery1.9/jquery-1.9.0.js"></script>
    <style>
        .container {
            width: 400px;
            height: 400px;
            display: flex;
            justify-content: space-between;
        }

        .d2 {
            margin-top: 50px;
        }

        .dd {
            margin-bottom: 10px;
        }

        select {
            width: 130px;
            height: 185px;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="d1">
            <select class="left" multiple size="8">
                <option value="1">选项A</option>
                <option value="2">选项B</option>
                <option value="3">选项C</option>
                <option value="4">选项D</option>
                <option value="5">选项E</option>
            </select>
        </div>
        <div class="d2">
            <div class="dd"><input type="button" value="批量右移" id="moveSome"></div>
            <div><input type="button" value="全部右移" id="moveAll"></div>
        </div>
        <div class="d3">
            <select class="right" multiple size="8">

            </select>
        </div>
    </div>

    <script>
         $("#moveSome").click(function(){
            $(".left option:checked").appendTo($(".right"));
            $(".right option").prop("selected",false);
         });   
         $("#moveAll").click(function(){
            $(".left option").appendTo($(".right"));
            $(".right option").prop("selected",false);
         });  
         $(".left option").dblclick(function(){
            $(this).appendTo($(".right"));
            $(".right option").prop("selected",false);
         }); 
    </script>
</body>

</html>